<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">请假管理</h5>
        <button class="btn btn-primary" onclick="showApplyLeaveModal()">申请请假</button>
    </div>
    <div class="card-body">
        <!-- 请假记录筛选 -->
        <div class="row mb-3">
            <div class="col-md-3">
                <select class="form-select" id="leaveStatus" onchange="filterLeaves()">
                    <option value="">全部状态</option>
                    <option value="0">待审核</option>
                    <option value="1">已通过</option>
                    <option value="2">已拒绝</option>
                </select>
            </div>
        </div>

        <!-- 请假记录列表 -->
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>申请人</th>
                        <th>请假类型</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>状态</th>
                        <th>审批人</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="leaveTableBody">
                    <!-- 动态加载的请假记录 -->
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 申请请假模态框 -->
<div class="modal fade" id="leaveModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">申请请假</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="leaveForm">
                    <div class="mb-3">
                        <label class="form-label">请假类型</label>
                        <select class="form-select" id="leaveType" required>
                            <option value="1">事假</option>
                            <option value="2">病假</option>
                            <option value="3">年假</option>
                            <option value="4">调休</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">开始时间</label>
                        <input type="datetime-local" class="form-control" id="leaveStartTime" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">结束时间</label>
                        <input type="datetime-local" class="form-control" id="leaveEndTime" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">请假原因</label>
                        <textarea class="form-control" id="leaveReason" rows="3" required></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="submitLeave()">提交</button>
            </div>
        </div>
    </div>
</div>

<!-- 审批模态框 -->
<div class="modal fade" id="approveModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">审批请假</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="approveForm">
                    <input type="hidden" id="leaveId">
                    <div class="mb-3">
                        <label class="form-label">审批意见</label>
                        <textarea class="form-control" id="approveComment" rows="3" required></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" onclick="approveLeave(2)">拒绝</button>
                <button type="button" class="btn btn-success" onclick="approveLeave(1)">通过</button>
            </div>
        </div>
    </div>
</div>

<!-- 查看详情模态框 -->
<div class="modal fade" id="viewLeaveModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">请假详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="leaveDetail">
                    <!-- 动态加载的请假详情 -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 错误提示模态框 -->
<div class="modal fade" id="errorModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">错误提示</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="errorMessage"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>

<!-- 成功提示模态框 -->
<div class="modal fade" id="successModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">提示</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="successMessage"></p>
            </div>
        </div>
    </div>
</div> 